<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
    <div>
        <p>info below</p>
        <ul id="line"></ul>
    </div>
    <div>
        <button onclick="pushWhispering()">推送信息</button>
        <input name="text" placeholder="消息内容">
        <input name="type" placeholder="类型" value="0">
        <input name="fd" placeholder="fd" value="0">
    </div><br>
    <div>
        <textarea name="xAuthToken" placeholder="xAuthToken" style="width: 300px; height: 200px;">eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJsb3ZlciIsImlhdCI6MTU3ODUzMTkzNSwiZGF0YSI6eyJ1bmlxaWRfdG9rZW4iOiJsb3ZlcjVlMTY3YzVmMzQ4YmUiLCJwaG9uZSI6IjE1ODEzNTYyMzQ2In19.s9v8tWqcfhtErQy5bsUw0dZPu3gxWex78OnfWidIxFA</textarea>
    </div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var wsServer = 'ws://47.56.148.190:9501';
    //var wsServer = 'ws://127.0.0.1:9501';
    var websocket = new WebSocket(wsServer);

    // 可参考  https://www.runoob.com/html/html5-websocket.html
    window.onload = function () {

        websocket.onopen = function (evt) {
            console.log(evt);
            addLine("Connected to WebSocket server.");


            say('Index', 'index', {});
        };
         websocket.onclose = function (evt) {
             console.log(evt);

            addLine("Disconnected");
        };

         websocket.onmessage = function (evt) {
             console.log(evt);

             var data = $.parseJSON(evt.data);

             $("input[name='fd']").val(data.data.fd);

            addLine('Retrieved data from server: ' + evt.data);
        };

         websocket.onerror = function (evt, e) {

             console.log(evt);

             var data = $.parseJSON(evt.data);

             $("input[name='fd']").val(data.data.fd);

            addLine('Error occured: ' + evt.data);
        };

    };
    function addLine(data) {
        $("#line").append("<li>"+data+"</li>");
    }

    // 推送信息
    function pushWhispering() {

        var params = {
            'text': $("input[name='text']").val()
        };

        say('User', 'pushWhispering', params);
    }

    // 请求服务器
    function say(classSend, action, content) {

        content.xAuthToken = $("textarea[name='xAuthToken']").val();
        content.clientType = $("input[name='type']").val();
        content.fd         = $("input[name='fd']").val();

        var params = {
            class: classSend,
            action: action,
            content: content
        };

        websocket.send(JSON.stringify(params));
    }

</script>
</html>